<template>
  <div id="inductionAdd" style="overflow: hidden">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="手动办理" name="1"></el-tab-pane>
      <el-tab-pane label="扫码入职" name="2"></el-tab-pane>
      <el-tab-pane label="审批办理" name="3"></el-tab-pane>
    </el-tabs>
    <div class="area area1" v-show="activeName == '1'" :style="{ height: area1Height + 'px' }">
      <employee ref="employee" :registerTable="registerTable" style="overflow: hidden" />
    </div>
    <div class="area area2" v-show="activeName == '2'">
      <div class="area2_content">
        <div class="header">
          <div class="left">
            <span class="top1">流程介绍</span>
            <span class="bottom1">1、HR分享入职登记二维码&nbsp;&nbsp;&nbsp;>>&nbsp;&nbsp;&nbsp;2、员工填写并提交人员登记表&nbsp;&nbsp;&nbsp;>>&nbsp;&nbsp;&nbsp;3、HR确认入职</span>
          </div>
          <el-divider direction="vertical"></el-divider>
          <div class="right">
            <div class="btn" @click="drawer = true"><span class="iconfont">&#xeaf1;</span><span class="text">新增入职登记二维码</span></div>
          </div>
        </div>
        <div class="items">
          <template v-if="items && items.length > 0">
            <div class="item" v-for="(item, index) in items" :key="item.registerID + index">
              <div class="img"><img :src="item.wechatMiniUrl" alt="" :id="'img' + index" /></div>
              <div class="top1">{{ item.name }}</div>
              <div class="description">{{ item.description }}</div>
              <div class="btns">
                <!-- <a :href="item.wechatMiniUrl" :download="item.wechatMiniUrl">aaaaaaa</a> -->
                <el-button type="primary" @click="downloadIamge(item.wechatMiniUrl, item.name)">保存二维码</el-button>
                <el-button type="default" @click="goregisterFormAdd(item.qrID)">设置</el-button>
              </div> 
            </div>
          </template>
          <div v-else>
            <el-empty description="暂无数据"></el-empty>
          </div>
        </div>
      </div>
    </div>
    <div class="area area3" v-show="activeName == '3'">
      <approvePerson :handleType="'induction'"></approvePerson>
    </div>
    <el-drawer :wrapperClosable="false" :title="isEdit ? '编辑入职登记二维码' : '新增入职登记二维码'" :destroy-on-close="true" :visible.sync="drawer" :before-close="handleClose" :modal-append-to-body="false" custom-class="form">
      <el-form label-position="top" label-width="80px" :model="form" :rules="rules" ref="form">
        <el-form-item label="名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="说明" prop="description">
          <el-input v-model="form.description" placeholder="请输入说明"></el-input>
        </el-form-item>
        <!-- <el-form-item label="通知接收人" prop="recipientUserIds">
          <el-select v-model="form.recipientUserIds" placeholder="请选择" filterable multiple>
            <el-option v-for="(item, index) in userList" :key="index" :value="item.userid" :label="item.realName"></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="入职部门" prop="selectDepType">
          <el-radio-group v-model="form.selectDepType">
            <el-radio :label="1">不显示</el-radio><br />
            <el-radio :label="2" style="margin-top: 8px">员工可自行选择部门</el-radio><br />
            <el-radio :label="3" style="margin-top: 8px">员工只可选择部分部门</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.selectDepType == 3" prop="optionDepIds">
          <el-cascader popper-class="popper_person" :show-all-levels="false" style="width: 100%" :options="companySection" :props="defaultProps" v-model="form.optionDepIds" placeholder="请选择部门" clearable></el-cascader>
        </el-form-item>
        <el-form-item label="入职登记表" prop="registerID">
          <el-select v-model="form.registerID" placeholder="请选择">
            <el-option v-for="(item, index) in registerTable" :key="index" :value="item.key" :label="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="footer">
        <el-button type="default" @click="handleClose">取消</el-button>
        <el-button type="primary" @click="saveRigesterTable">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import employee from "../../staffManagement/editEmployee/waithandle";
import approvePerson from "../approvePerson.vue";
import { mapState } from "vuex";
export default {
  components: {
    employee,
    approvePerson,
  },
  data() {
    return {
      form: {},
      drawer: false,
      activeName: "1",
      registerTable: [],
      defaultProps: {
        children: "childrens",
        label: "name",
        value: "id",
        multiple: true,
        checkStrictly: true,
        emitPath: false,
      },
      items: [],
      isEdit: false,
      area1Height: 500,
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        description: [{ required: true, message: "请选择说明", trigger: "change" }],
        registerID: [{ required: true, message: "请选择入职登记表", trigger: "change" }],
        // recipientUserIds: [{ required: true, message: "请选择通知接收人", trigger: "change" }],
      },
    };
  },
  computed: {
    ...mapState({
      companySection: (state) => state.common.companySection,
      userList: (state) => state.common.userList,
    }),
  },
  mounted() {
    this.$refs.employee.initialize("add");
    this.area1Height = document.getElementById("inductionAdd").clientHeight - 70;
    window.addEventListener("resize", () => {
      this.area1Height = document.getElementById("inductionAdd").clientHeight - 70;
    });
    this.getRegisterTableList();
  },
  activated() {
    if (this.activeName == "2") {
      this.getQrCodeList();
    }
  },
  methods: {
    goregisterFormAdd(qrID) {
      this.$api.personChangeNew.EmployeeEntryRegisterQrcodeGet({ qrID }).then((res) => {
        this.form = res.data.data;
        this.drawer = true;
        this.isEdit = true;
      });
    },
    downloadIamge(url, name) {
      this.$api.optionsManage.GetImageBase64({ url }).then((res) => {
        console.log(res, "data");
        let a = document.createElement("a"); // 生成一个a元素
        let event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name; // 设置图片名称没有设置则为默认
        a.href = `data:image/png;base64,${res.data.data}`; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      });
      // html2canvas(document.getElementById("img" + index), {
      //   backgroundColor: null, //画出来的图片有白色的边框,不要可设置背景为透明色（null）
      //   useCORS: true, //支持图片跨域
      //   scale: 1, //设置放大的倍数
      // }).then((canvas) => {
      //   // 把生成的base64位图片上传到服务器,生成在线图片地址
      //   let url = canvas.toDataURL("image/png"); // toDataURL: 图片格式转成 base64
      //   this.imgUrl = url;
      //   //将图片下载到本地
      //   let a = document.createElement("a"); // 生成一个a元素
      //   let event = new MouseEvent("click"); // 创建一个单击事件
      //   a.download = name || "信用卡推荐二维码"; // 设置图片名称没有设置则为默认
      //   a.href = url; // 将生成的URL设置为a.href属性
      //   a.dispatchEvent(event); // 触发a的单击事件
      // });

      // console.log(iframe.window, "this.$refs.iframe");
      // iframe.window.location.href = imgsrc;
      // iframe.document.execCommand("SaveAs");
      // var a = document.createElement("a"); // 生成一个a元素
      // var event = new MouseEvent("click"); // 创建一个单击事件
      // a.download = imgsrc; // 设置图片名称
      // a.href = imgsrc; // 将生成的URL设置为a.href属性
      // a.target = "_blank";
      // a.click(event); // 触发a的单击事件

      // var image = new Image();
      // //跨域会导致a标签在部分浏览器中会直接打开新标签页 解决跨域 Canvas 污染问题
      // image.setAttribute("crossOrigin", "anonymous");
      // image.onload = function () {
      //   var canvas = document.createElement("canvas");
      //   canvas.width = image.width;
      //   canvas.height = image.height;

      //   var context = canvas.getContext("2d");
      //   context.drawImage(image, 0, 0, image.width, image.height);
      //   var url = canvas.toDataURL("image/png");

      //   // 生成一个a元素
      //   var a = document.createElement("a");
      //   // 创建一个单击事件
      //   var event = new MouseEvent("click");

      //   // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
      //   a.download = name || "下载图片名称";
      //   // 将生成的URL设置为a.href属性
      //   a.href = url;

      //   // 触发a的单击事件
      //   a.dispatchEvent(event);
      // };

      // image.src = imgsrc;
    },
    getRegisterTableList() {
      this.$api.settingApi.GetSelect().then((res) => {
        this.registerTable = res.data.data;
      });
    },
    handleClose(type) {
      this.isEdit = false;
      this.drawer = false;
      this.form = {};
    },
    handleClick(tab, event) {
      if (tab.name == "1") {
        this.$refs.employee.initialize("add");
      } else if (tab.name == "2") {
        this.getQrCodeList();
      }
    },
    getQrCodeList() {
      this.$api.personChangeNew.GetList().then((res) => {
        this.items = res.data.data;
      });
    },
    saveRigesterTable() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.form.selectDepType != 3) {
            this.form.optionDepIds = [];
          }
          this.$api.personChangeNew[this.isEdit ? "EmployeeEntryRegisterQrcodePut" : "EmployeeEntryRegisterQrcodePost"](this.form).then((res) => {
            if (res.data.status == 200) {
              this.drawer = false;
              this.form = {};
              this.$message.success(this.isEdit ? "修改成功" : "添加成功");
              this.isEdit = false;
            }
          });
        }
      });
    },
  },
};
</script>
<style lang="less" scoped>
#inductionAdd {
  display: flex;
  flex-flow: column;
  position: relative;
  .area2 {
    height: 100%;
    .area2_content {
      height: 100%;
      .header {
        width: 100%;
        height: 60px;
        background-color: #f7f8fc;
        display: flex;
        flex-flow: row;
        justify-content: space-around;
        align-items: center;
        .left {
          width: 85%;
          height: 100%;
          display: flex;
          flex-flow: column;
          padding: 10px 15px;
          .top {
            font-size: 16px;
            font-weight: bold;
          }
          .bottom1 {
            color: #949599;
            font-size: 12px;
          }
        }
        .right {
          width: 15%;
          .btn {
            display: flex;
            align-items: center;
            justify-content: center;
            .iconfont {
              font-size: 20px;
            }
            .text {
              font-size: 14px;
            }
          }
        }
        .right div:hover {
          color: #39a4ef;
          cursor: pointer;
        }
      }
      .items {
        height: calc(100% - 120px);
        overflow: auto;
        padding: 18px 0px;
        display: flex;
        width: 100%;
        flex-flow: wrap;
        justify-content: center;
        height: calc(100% - 120px);
        overflow: auto;
        .item {
          height: 70%;
          width: 16%;
          display: flex;
          flex-flow: column;
          justify-content: center;
          align-items: center;
          box-shadow: 0px 0px 10px #d4dcf0;
          padding: 15px;
          border-radius: 12px;
          margin-left: 50px;
          margin-bottom: 30px;
          .description {
            font-size: 14px;
            color: #ccc;
          }
          .img {
            width: 80%;
            // background-image: url("../../../../assets/images/personnel/registerTable.png");
            // background-repeat: no-repeat;
            // background-size: 100% 100%;
            img {
              width: 100%;
            }
          }
          .btns {
            display: flex;
            flex-flow: column;
            align-items: center;
            width: 100%;
            .el-button {
              margin-top: 10px;
              width: 80px;
              height: 30px;
            }
          }
        }
      }

      :deep(.phone_body_temploy) {
        width: 400px !important;
        border-radius: 30px;
        .phone_count_prvew {
          // height: 600px;
          // overflow: auto;
          .phone {
            width: 400px;
            height: 680px;
            // box-shadow: 1px 1px 20px 0px #ccc;
            // overflow: auto;
            border-radius: 30px;
            padding: 10px;
            // margin: 20px 0 20px 80px;
            margin: 0;
            position: relative;
            .form {
              height: 100%;
              border-radius: 30px;
              border: 1px solid #ccc;
              box-sizing: border-box;
              background-color: #f7f7f7;
              .iconfont {
                position: absolute;
                right: -18px;
                top: -10px;
                font-size: 15px;
                cursor: pointer;
                color: white;
              }
            }
            .form_body {
              height: calc(100% - 90px);
              overflow: auto;
              background-color: #fff;
              margin-top: 45px;
              .el-form-item {
                margin-bottom: 10px;
              }
              .demo-formLabelList {
                // height: 100% !important;
              }
              .demo-formLabelList-m {
                span {
                  margin-left: 10px;
                }
                span:before {
                  left: 0px;
                }
              }
            }
            .title {
              width: 378px;
              height: 45px;
              line-height: 45px;
              text-align: center;
              position: absolute;
              box-sizing: border-box;
              border-radius: 0;
              border-top-left-radius: 30px;
              border-top-right-radius: 30px;
              border-bottom: 1px solid #ccc;
              font-weight: 700;
              background-color: #fff;
              box-sizing: border-box;
            }
          }
        }
        .el-dialog__header {
          display: none;
        }
        .el-dialog__body {
          padding: 0;
          border-radius: 30px;
        }
      }
    }
  }
  .area3 {
    width: 100%;
    height: 93%;
  }
  :deep(.el-drawer__wrapper) {
    .el-drawer__body {
      position: relative;
    }
    position: absolute;
    .el-drawer__header {
      background-color: #f4f9fd;
      padding: 10px 10px;
      margin-bottom: 0;
    }
    .el-form {
      padding: 10px 15px;
      height: 90%;
      overflow: auto;
      .el-form-item__label {
        line-height: 20px;
        padding: 0;
      }
      .el-input__inner {
        padding: 0;
      }
      .el-radio {
        left: 0;
      }
    }
    .footer {
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      display: flex;
      justify-content: center;
      border-top: 1px solid #e5e5e5;
      padding: 10px;
      background-color: white;
    }
  }
  :deep(.v-modal) {
    position: absolute;
  }
}
</style>
